<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{width:200px;height:200px;background-color: yellow;position: absolute;}
    </style>
    <script>
        window.onload=function(){
            var oDiv=document.getElementById('div1');
            var disX=0;//初始值
            var disY=0;//初始值
          oDiv.onmousedown=function(ev){
              var oEvent=ev||event;//事件对象
              disX=oEvent.clientX-oDiv.offsetLeft;//求固定的长度
              disY=oEvent.clientY-oDiv.offsetTop;//求固定的高度
              document.onmouseover=function(ev){
                  var oEvent=ev||event;
//                  求oDiv的位置，让oDiv物体跟着鼠标运动，就是让其位置变化
                  oDiv.style.left=oEvent.clientX-disX+'px';
                  oDiv.style.top=oEvent.clientY-disY+'px';

              };
              document.onmouseup=function(){
//                  鼠标抬起，就需要把鼠标移动取消
                  document.onmouseover=null;
                  document.onmouseup=null;
              };
              return false;
          };

        };
    </script>
</head>
<body>
<div id="div1">第三方士大夫</div>
</body>
</html>